<template>
	<view class="content">
        <u-navbar :is-back="true" back-icon-color="#000" title="公告" :background="background" :border-bottom="false" title-color="#000" title-size="30">
            <view slot="right" style="padding-right: 20rpx;font-size: 30rpx;" v-if="share == 0" @click="show = true">
                分享
            </view>
        </u-navbar>
        
        <template v-if="text">
            <view class="title u-font-32 u-text-center u-padding-top-40 u-padding-bottom-10">{{text.title}}</view>
            <view class="time u-font-24 u-text-center u-padding-bottom-35 u-margin-bottom-45">{{text.create_time}}</view>
            <u-parse :html="text.notice" :selectable="true"></u-parse>
            <template v-if="text && text.images && text.images.length > 0">
                <view class="img-box">
                    <image :src="item.image" class="img" v-for="(item, index) in text.images" :key="index" @click="doPreview(text.images,index)"></image>
                </view>
                <view class="btn" @click="downLoadImg">一键下载图片</view>
            </template>
        </template>
        
        <!-- 分享弹窗 -->
        <u-popup v-model="show" mode="bottom" border-radius="20" height="350rpx">
            <view class="pop-box">
                <view class="pop-top">
                    <view @click="toShare(1)">
                        <image src="../../static/icon/weixin.png" class="pop-icon"></image>
                        <view>分享好友</view>
                    </view>
                    <view @click="toShare(2)">
                        <image src="../../static/icon/pyq.png" class="pop-icon"></image>
                        <view>分享朋友圈</view>
                    </view>
                    <!-- <view>
                        <image src="../../static/icon/hb.png" class="hb-icon"></image>
                        <view class="u-p-t-15">生成海报</view>
                    </view> -->
                </view>
                <view class="pop-close" @click="show = false">关闭</view>
            </view>
        </u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                statusBar: 0,
                background: { backgroundColor: 'rgba(255,255,255,0)' },
				id: '',
				text: {},
                show: false,
				share: 0,
			}
		},
		onLoad(option) {
            let _this = this;
            //状态栏高度
            uni.getSystemInfo({
            	success: function(res) {
            		_this.statusBar = res.statusBarHeight;
            	}
            });
            // 判断是通过分享进入的
            if (option.share) {
                this.share = 1
            }
			this.id = option.id;
			this.getNoticeContent();
		},

		methods: {
            // 分享
            toShare(num) {
                this.show = false
                uni.setClipboardData({
                    data: this.text.notice,
                    success: function() {
                        console.log('success');
                        uni.showToast({
                            title: '文案已复制',
                            duration: 2000
                        });
                    }
                });
                // 1好友 2朋友圈
                let type = ''
                if (num == 1) type = 'WXSceneSession'
                if (num == 2) type = 'WXSceneTimeline'
                uni.share({
                	provider: "weixin",
                	scene: `${type}`,
                	type: 0,
					href: `https://app.qyjifangtong.com/header/h5/#/pages/notice/details?id=${this.id}&share=${1}`,
                	title: this.text.title,
                	imageUrl: this.text.image,
                	success: (res) => {
                		console.log("success:" + JSON.stringify(res));
                        this.isShare()
                	},
                	fail: (err) => {
                		console.log("fail:" + JSON.stringify(err));
                	}
                });
            },
            
            isShare() {
                this.$ajax('user_share', {
                    user_token: this.$getSync('userToken'),
                    type: 1,//1公告 2楼盘
                    id: this.id,//分享id
                }).then(ret => {
                    if (ret.success == 1000) {
                        
                    } else {
                        
                    }
                });
            },
            
            // 预览图片
            doPreview(item, index) {
            	var arr = [];
                item.forEach(cur => {
                    arr.push(cur.image)
                })
            	uni.previewImage({
            	    urls: arr,
                    current: index,
            	    longPressActions: {
            	        success: function(data) {
            	        },
            	        fail: function(err) {
                            console.log(err)
            	        }
            	    }
            	});
            },
            // 下载图片
            downLoadImg() {
                var url = '',
                    len = this.text.images.length
                for (var i = 0; i < len; i++) {
                    url = this.text.images[i].image
                    uni.downloadFile({
                    	url: url, //仅为示例，并非真实的资源
                    	success: (res) => {
                            // console.log('downloadFile', res)
                    		if (res.statusCode === 200) {
                                var tempFilePaths = res.tempFilePath;
                                uni.saveImageToPhotosAlbum({
                                    filePath: tempFilePaths,
                                    success: () => {
                                        this.$toast('下载成功');
                                    }
                                });
                    		}
                    	}
                    });
                }
            },
            
			// 获取公告详情
			getNoticeContent() {
				this.$ajax('notice_detail', {
                    user_token: this.$getSync('userToken'),
					id: this.id,
				}).then(ret => {
					if (ret.success == 1000) {
						this.text = ret.detail;
					} else {
						this.$toast(ret.msg);
					}
				});
			},
            
            onPageScroll: function(e) {
            	//nvue暂不支持滚动监听，可用bindingx代替
            	// console.log("滚动距离为：" + e.scrollTop);
            	let a = e.scrollTop * 0.05;
            	if (a > 1) {
            		a = 1;
            	}
            	if (e.scrollTop == 0) {
            		this.background.backgroundColor = 'rgba(255,255,255,0)';
            	} else {
            		this.background.backgroundColor = 'rgba(255,255,255,' + a + ')';
            	}
            },
		}
	}
</script>

<style lang="scss">
    // 分享弹窗
    .pop-box{
        background-color: #f5f5f5;
        width: 100vw;
    }
    .pop-top{
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 50rpx 0 35rpx;
    }
    .pop-top>view{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 24rpx;
        color: #424d5a;
    }
    // .pop-top>view:first-child{
    //     padding-right: 130rpx;
    // }
    .pop-icon{
        width: 104rpx;
        height: 104rpx;
        margin-bottom: 15rpx;
    }
    .hb-icon{
        width: 80rpx;
        height: 80rpx;
        margin-bottom: 15rpx;
    }
    .pop-close{
        font-size: 28rpx;
        color: #424d5a;
        padding: 30rpx 0;
        border-top: 2rpx solid #e6e6e6;
        text-align: center;
    }
    
    .img-box{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        padding-top: 20rpx;
    }
    .img{
        width: 210rpx;
        height: 210rpx;
        margin-right: 20rpx;
        margin-bottom: 20rpx;
    }
    .img:nth-child(3n){
        margin-right: 0;
    }
    .btn{
        color: #fff;
        font-size: 34rpx;
        text-align: center;
        padding: 25rpx;
        margin: 50rpx 0;
        background-color: #00a1e9;
        border-radius: 50rpx;
    }
    
	page {
		background: #ffffff;
	}

	.content {
		border-top: 2rpx solid #e6e6e6;
		padding: 0 30rpx 50rpx;
	}

	.title {
		font-weight: bold;
	}

	.time {
		color: #666666;
        border-bottom: 2rpx solid #e6e6e6;
	}

</style>
